<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" @click="dialogAdd = true">添加管理员</el-button>
        </div>

        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">管理员姓名：</span>
                <el-input placeholder="输入管理员姓名搜索" v-model.trim="user_name" size="default" clearable></el-input>
            </div>
            <div class="task-one__btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="admin_id" label="管理员ID"> </el-table-column>
            <el-table-column prop="admin_name" label="管理员姓名"> </el-table-column>
            <el-table-column prop="mobile" label="管理员账号"> </el-table-column>
            <el-table-column prop="role_name" label="角色名称"> </el-table-column>
            <el-table-column prop="updated_at_label" label="更新时间"> </el-table-column>
            <el-table-column label="操作" width="300" fixed="right">
                <template #default="scope">
                    <el-button class="theme-btn" link type="primary" @click="handleEdit(scope.row)">编辑 </el-button>
                    <el-popconfirm
                        title="确定删除此管理员吗？"
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)"
                    >
                        <template #reference>
                            <el-button class="theme-btn" link type="primary" style="margin-left: 14px">删除 </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 添加管理员 -->
        <el-dialog
            v-model="dialogAdd"
            title="添加管理员"
            width="580px"
            :close-on-click-modal="false"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="closeDialog(formAddRef)"
        >
            <el-form :model="formAdd" :rules="rules" ref="formAddRef" label-width="114px" key="add">
                <el-form-item label="管理员姓名" prop="admin_name">
                    <el-input v-model="formAdd.admin_name" placeholder="请输入管理员姓名" clearable></el-input>
                </el-form-item>
                <el-form-item label="管理员账号" prop="admin_tel" required>
                    <el-input v-model.trim="formAdd.admin_tel" type="tel" maxlength="11" placeholder="请输入管理员手机号" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="admin_pass">
                    <el-tooltip content="字母和数字组成6-15位,必须包含数字和字母" placement="top-start">
                        <el-input v-model="formAdd.admin_pass" show-password placeholder="请输入密码" clearable></el-input>
                    </el-tooltip>
                </el-form-item>
                <el-form-item label="角色名称" prop="role_id">
                    <el-select v-model="formAdd.role_id" placeholder="请选择角色名称" style="width: 100%">
                        <el-option :label="item.role_name" :value="item.role_id" v-for="(item, index) in options" :key="index"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-top: 30px">
                    <el-button type="primary" :loading="btn_loading" @click="submitAddForm(formAddRef)">确 定</el-button>
                    <el-button @click="closeDialog(formAddRef)">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 编辑管理员 -->
        <el-dialog
            v-model="dialogEdit"
            title="编辑管理员"
            width="40%"
            :close-on-click-modal="false"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="closeDialog(formEditRef)"
        >
            <el-form :model="formEdit" :rules="rules" ref="formEditRef" label-width="114px" key="edit">
                <el-form-item label="管理员姓名" prop="admin_name">
                    <el-input v-model="formEdit.admin_name" placeholder="请输入管理员姓名" clearable></el-input>
                </el-form-item>
                <el-form-item label="管理员账号" prop="admin_tel">
                    <el-input
                        v-model.trim="formEdit.admin_tel"
                        type="tel"
                        maxlength="11"
                        disabled
                        placeholder="请输入管理员手机号"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="角色名称" prop="role_id">
                    <el-select v-model="formEdit.role_id" placeholder="请选择角色名称" style="width: 100%">
                        <el-option :label="item.role_name" :value="item.role_id" v-for="(item, index) in options" :key="index"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-top: 30px">
                    <el-button type="primary" :loading="btn_loading" @click="submitEditForm(formEditRef)">确 定 </el-button>
                    <el-button @click="closeDialog(formEditRef)">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, reactive, onMounted, toRefs, watch } from "vue"
import OneLoad from "@mixins/one-load"
import { Search } from "@element-plus/icons-vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getRoles()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

const user_name = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

const handleDelete = (row) => {
    proxy.$axios
        .post("admin/delete", {
            admin_id: row.admin_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
}

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        admin_name: user_name.value, // 管理员名称进行搜索
    }
    getdata("admin/index", params)
}

/**
 * 管理员添加/编辑
 */
const dialogAdd = ref(false)
const dialogEdit = ref(false)
const btn_loading = ref(false)
const formAddRef = ref(null)
const formEditRef = ref(null)
const formData = reactive({
    formEdit: {},
    formAdd: {
        admin_name: "",
        admin_tel: "",
        admin_pass: "",
        role_id: "",
    },
    rules: {
        admin_name: [{ required: true, message: "请输入管理员姓名", trigger: "blur" }],
        admin_tel: [{ validator: proxy.$util.validPhone, trigger: "blur" }],
        admin_pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
        role_id: [{ required: true, message: "请选择角色名称", trigger: "change" }],
    },
    options: [],
})
const submitAddForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            btn_loading.value = true
            proxy.$axios
                .post("admin/add", {
                    role_id: formData.formAdd.role_id,
                    admin_name: formData.formAdd.admin_name,
                    mobile: formData.formAdd.admin_tel,
                    password: formData.formAdd.admin_pass,
                })
                .then((res) => {
                    btn_loading.value = false
                    switch (res.data.code) {
                        case 0:
                            dialogAdd.value = false
                            proxy.$message({ message: "添加成功！", type: "success" })
                            pubParams(getList)
                            break
                        default:
                            proxy.$message({message:res.data.msg,type:"error"})
                            break
                    }
                })
                .catch((err) => {
                    btn_loading.value = false
                })
        }
    })
}
const submitEditForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            btn_loading.value = true
            proxy.$axios
                .post("admin/update", {
                    role_id: formData.formEdit.role_id,
                    admin_name: formData.formEdit.admin_name,
                    admin_id: formData.formEdit.admin_id,
                })
                .then((res) => {
                    btn_loading.value = false
                    switch (res.data.code) {
                        case 0:
                            dialogEdit.value = false
                            proxy.$message({ message: "编辑成功！", type: "success" })
                            pubParams(getList)
                            break
                        default:
                            proxy.$message({message:res.data.msg,type:"error"})
                            break
                    }
                })
                .catch((err) => {
                    btn_loading.value = false
                })
        }
    })
}
const handleEdit = (row) => {
    dialogEdit.value = true
    formEdit.value.admin_name = row.admin_name
    formEdit.value.admin_tel = row.mobile
    formEdit.value.role_id = row.role_id
    formEdit.value.admin_id = row.admin_id
}
const closeDialog = (formEl) => {
    if (!formEl) return
    dialogAdd.value = false
    dialogEdit.value = false
    formEl.resetFields()
}

function getRoles() {
    proxy.$axios
        .get("admin/add", {
            params: {
                page: 1,
                limit: 100,
            },
        })
        .then((res) => {
            getList()
            if (res.data.code == 0) {
                formData.options = res.data.data
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

const { formEdit, formAdd, rules, options } = toRefs(formData)
</script>
<script>
export default {
    name: "ManagementUser",
}
</script>

<style lang="less" scoped></style>
